<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stack Overflow Questions</title>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">

    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
</head>
<body>

<div id="app">
    <el-container>
        <el-main>
            <el-table :data="questions" style="width: 100%">
                <el-table-column prop="title" label="标题"></el-table-column>
                <el-table-column prop="contentText" label="内容"></el-table-column>
                <el-table-column prop="answerCount" label="回答数"></el-table-column>
                <el-table-column prop="viewCount" label="查看数"></el-table-column>
                <el-table-column prop="voteCount" label="点赞数"></el-table-column>
                <el-table-column prop="askerName" label="提问人名称"></el-table-column>
                <el-table-column prop="reputationScore" label="提问人名声"></el-table-column>
                <el-table-column prop="askedTime" label="提问时间"></el-table-column>
            </el-table>
        </el-main>
    </el-container>
</div>

<script>
    const {createApp} = Vue
    var app = createApp({
        data() {
            return {
                questions: []
            }
        },
        mounted() {
            axios
                .get('http://localhost:8080/data/pullQuestions')
                .then(response => {
                        this.questions = response.data
                        console.log(response)
                    }
                )
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }
    }).use(ElementPlus).mount('#app')
</script>
</body>
</html>
